<template>
  <div class="w-full">
    <ProTable
      ref="tableRef"
      :fetchListApi="_fetchList"
      :columns="columns"
      row-key="id"
    >
      <template #modelAlwaysVOS="{ record }">
        <Tree
          v-if="record.modelAlwaysVOS && record.modelAlwaysVOS.length"
          :tree-data="record.modelAlwaysVOS"
          :field-names="fileNames"
        />
      </template>
      <template #configType="{ record }">
        <template v-if="record.configType.includes('{')">
          <Tree :tree-data="JSON.parse(record.configType)" />
        </template>
        <template v-else>
          <Popover
            placement="right"
            trigger="hover"
            :overlayStyle="{ width: '100px' }"
            overlayClassName="popovper-dark"
            v-if="record.configType.split(',').length > 2"
          >
            <template #content>
              <ul>
                <li v-for="item in record.configType.split(',')">{{ item }}</li>
              </ul>
            </template>
            <div class="truncate w-full" v-html="record.configType"></div>
          </Popover>
          <div v-else class="truncate w-full" v-html="record.configType"></div>
        </template>
      </template>

      <template #operation="{ record }">
        <b-button
          type="link"
          @click="onSelect(record)"
          code="firmwareVersion:edit"
        >
          选择
        </b-button>
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="tsx">
import { computed, ref } from 'vue';
import { Popover, Select, SelectOption, Tree, TreeProps } from 'ant-design-vue';
import { ProTable, ProTableProps } from '@/components/ProTable/index';
import { protobufVersionEnum } from '@/constant/push';
import { listQuickConfig } from '@/api/push';

const tableRef = ref();
const type = ref('1');
const _fetchList = async (params: any) => {
  const res = await listQuickConfig({
    ...params,
    status: '1',
    approvalStatus: '1',
  });
  // type.value = params.type;

  res.rows.forEach((item: any) => {
    if (item.modelAlwaysVOS) {
      item.modelAlwaysVOS.forEach((model: any) => {
        model.typeName = `${model.typeName}(${model.modeName.length})`;
        model.modeName = model.modeName.map((name: any) => {
          return {
            typeName: name,
          };
        });
      });
    }
  });
  return { rows: [...res.rows], total: res.total || 0 };
};
const fileNames = {
  title: 'typeName',
  children: 'modeName',
};

const columns = computed<ProTableProps['columns']>(() => [
  {
    title: '配置编码ID',
    dataIndex: 'code',
  },
  {
    title: '协议版本',
    dataIndex: 'protobufVersion',
    valueEnum: protobufVersionEnum,
    customRender({ text }) {
      return text;
    },
  },
  {
    title: '设备类型/设备型号',
    dataIndex: 'modelAlwaysVOS',
    hideInSearch: true,
    width: 160,
  },
  {
    title: '配置说明',
    dataIndex: 'configExplain',
    hideInSearch: true,
  },
  {
    title: '配置类别',
    dataIndex: 'configType',
    width: 150,
    hideInSearch: true,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    hideInSearch: true,
    isTime: true,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    hideInSearch: true,
    fixed: 'right',
    width: 100,
  },
]);

const emit = defineEmits(['select']);
const onSelect = (record: any) => {
  emit('select', record);
};
</script>

<style lang="scss" scoped>
:deep(.ant-table) {
  height: calc(65vh - 200px) !important;
}
:deep(.ant-table-body) {
  height: calc(65vh - 200px) !important;
}
</style>
